<template>
  <div class="book_page">
    <van-nav-bar :fixed="true" title="一键借阅" left-arrow @click-left="handleGoBack" />
    <div class="book_content">
      <!-- 图书数据 start -->
      <div class="book_info_wrap">
        <div class="bg_wrap">
          <van-image fit="cover" :src="book.bg"> </van-image>
        </div>
        <van-row type="flex" justify="space-between" class="book_info">
          <van-col>
            <div class="title">{{ book.title }}</div>
            <div class="author">作者：{{ book.author }}</div>
            <van-row type="flex" class="grade_row">
              <van-col class="grade"><van-icon name="star" />{{ book.grade }}</van-col>
              <van-col class="appraiser">评分（{{ book.appraiser }}）</van-col>
            </van-row>
            <div class="page">页数:{{ book.page }}</div>
            <div class="publisher">{{ book.publisher }}/{{ book.publisherDate }}</div>
            <div class="isbn">ISBN:{{ book.ISBN }}</div>
            <van-button plain>
              <van-row type="flex" justify="space-between" align="center"
                ><span class="price">{{ book.price }}</span> <img class="shopcart" src="@/assets/imgs/shopcart.png" /></van-row
            ></van-button>
          </van-col>
          <van-col class="col_cover">
            <img v-if="hasCollect" class="collect" src="@/assets/imgs/collect.png" />
            <van-image class="cover" fit="cover" :src="book.cover"> </van-image>
          </van-col>
        </van-row>
      </div>
      <!-- 图书数据 end -->
      <van-tabs>
        <!-- 馆藏 start -->
        <van-tab title="馆藏">
          <van-collapse :border="false" v-model="activeNames" :accordion="true">
            <van-collapse-item v-for="(item, index) in book.libraries" :title="item.zone" :key="index" :name="index">
              <div v-for="(subItem, idx) in item.list" :key="idx">
                <van-row class="libraris_card" type="flex" justify="space-between" align="center">
                  <div class="libraris_card_info">
                    <div class="name">
                      所在馆：{{ subItem.name }} <img v-if="subItem.lent" class="icon_lent" src="@/assets/imgs/lent.png" /><img v-else class="icon_lent" src="@/assets/imgs/lend.png" />
                    </div>
                    <div>条码号：{{ subItem.barCode }}</div>
                    <div>位置：{{ subItem.position }}</div>
                    <div>索书号：{{ subItem.reference }}</div>
                  </div>
                  <img class="icon_pos" src="@/assets/imgs/pos.png" />
                </van-row>
              </div>
            </van-collapse-item>
          </van-collapse>
        </van-tab>
        <!-- 馆藏 end -->
        <!-- 内容简介 start -->
        <van-tab title="内容简介" class="com_pane">
          <div class="brief" v-html="book.aboutBook" />
          <div class="tags">
            <van-tag round v-for="tag in book.tags" :key="tag">{{ tag }}</van-tag>
          </div>
        </van-tab>
        <!-- 内容简介 end -->
        <!-- 作者简介 start -->
        <van-tab title="作者简介" class="com_pane">
          <div class="author">{{ book.author }}</div>
          <div class="brief" v-html="book.aboutAuthor" />
        </van-tab>
        <!-- 作者简介 end -->
        <!-- 评论 start -->
        <van-tab class="com_pane coments_pane" :title="`评论（${book.comments.length}）`">
          <van-cell :title="`评论（${book.comments.length}条）`" is-link />
          <van-row v-for="(item, index) in book.comments" type="flex" justify="space-between" :key="index" class="coment">
            <van-image class="profile" round :src="item.profile" />
            <div class="coment_content">
              <div class="user">{{ item.librarie }}-{{ item.username }}</div>
              <div class="date">
                <span>{{ item.date }}</span
                >发表书评
              </div>
              <div class="content">{{ item.content }}</div>
              <van-row class="row_action" type="flex" align="center">
                <van-col class="col_like"
                  ><img class="icon_like" v-if="item.like" src="@/assets/imgs/like_active.png" />
                  <img class="icon_like" v-else src="@/assets/imgs/like.png" />
                  {{ item.like }}
                </van-col>
                <van-col
                  ><img class="icon_comment" src="@/assets/imgs/comment.png" />
                  {{ item.subComment }}
                </van-col>
              </van-row>
            </div>
          </van-row>
          <van-button block @click="handleShowAll">查看全部评论</van-button>
        </van-tab>
        <!-- 评论 end -->
      </van-tabs>
      <div class="recommond">
        <h2>相关推荐</h2>
        <van-swipe :show-indicators="false" :loop="false" class="recommond-swipe" width="110">
          <van-swipe-item v-for="(item, index) in book.recommond" :key="index">
            <van-image fit="contain" class="recommond-cover" :src="item.cover" />
            <h3>{{ item.name }}</h3>
            <h4>{{ item.author }}</h4>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <van-tabbar class="detail_tabbar">
      <van-tabbar-item @click="handleAdvance"
        ><span>预借</span><template #icon> <img src="@/assets/imgs/icon_advance.png" /> </template
      ></van-tabbar-item>
      <van-tabbar-item class="tabbar_collect" @click="handleCollect" icon="search"
        ><span>收藏</span><template #icon> <img src="@/assets/imgs/icon_collect.png" /> </template
      ></van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="handleLend"
        ><span>借阅</span><template #icon> <img src="@/assets/imgs/icon_lent.png" /> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      // 已收藏
      hasCollect: 'true',
      // 预借
      advance: false,
      // 激活tab
      activeNames: 0,
      // tabs
      tabs: [
        {
          name: '馆藏',
          code: 1,
        },
        {
          name: '内容简介',
          code: 2,
        },
        {
          name: '作者简介',
          code: 3,
        },
        {
          name: '评论（412）',
          code: 4,
        },
      ],
      // 图书数据
      book: {
        title: '',
        author: '塔拉·韦斯特弗 Tara Westover',
        grade: '8.0',
        appraiser: 18,
        page: 288,
        publisher: '浙江教育出版社',
        publisherDate: '2018-04-01',
        ISBN: '9787553669090',
        price: '￥21.00',
        recommond: [
          {
            name: '夜晚的潜水艇',
            cover: 'https://alipic.lanhuapp.com/XDSlicePNGMAXb4cde546460141caf0934307191021a6486d0a629ec6ce53b3c238329ccc1696.png',
            author: '陈春成',
          },
          {
            name: '最后来的是乌鸦',
            cover: 'https://alipic.lanhuapp.com/XDSlicePNGMAXb4cde546460141caf0934307191021a6486d0a629ec6ce53b3c238329ccc1696.png',
            author: 'Ultimo viene il corvo',
          },
          {
            name: '少年Pi的奇幻漂记',
            cover: 'https://alipic.lanhuapp.com/XDSlicePNGMAXb4cde546460141caf0934307191021a6486d0a629ec6ce53b3c238329ccc1696.png',
            author: 'Yann Martel',
          },
          {
            name: '小王子',
            cover: 'https://alipic.lanhuapp.com/XDSlicePNGMAXb4cde546460141caf0934307191021a6486d0a629ec6ce53b3c238329ccc1696.png',
            author: 'Le Petit Prince',
          },
        ],
        comments: [
          {
            username: '桃花石上书生',
            librarie: '义乌图书馆',
            date: '01-07 15:20',
            content: '好像回到读《我的天才女友》的时候。进入得慢，读起来兴奋甚至战栗，读完心情不能平静。',
            like: 0,
            subComment: 0,
            profile: 'https://alipic.lanhuapp.com/XDSlicePNGMAXe04a9075a4c46c1a2792423d18286a8e077c85bc2e46a11326fcbee87edb2114.png',
          },
          {
            username: 'Calypso',
            librarie: '金华图书馆',
            date: '01-07 15:20',
            content: '我觉得，有点扯！咋滴她在大学读一段时间就能去剑桥了？咋滴她突然觉得自己有学术天赋就成为博士了？归根结底是不是美国的数学太简单了？？？？',
            like: 6,
            subComment: 2,
            profile: 'https://alipic.lanhuapp.com/XDSlicePNGMAX75c9b4c9e7b9261e21b3d0703e9b3bfb629fac94165359af8d88444e5eb3a5df.png',
          },
          {
            username: '火心',
            librarie: '金华图书馆',
            date: '01-07 15:20',
            content: '单纯从书的层面来讲，远远被高估了。',
            like: 3,
            subComment: 1,
            profile: 'https://alipic.lanhuapp.com/XDSlicePNGMAX025d394934bdb710f96349d93f0fe39b840a64905da0cfa88ab0093ed0b041f7.png',
          },
        ],
        tags: ['小说', '魔幻现实主义', '外国文学', '大屠杀', '加拿大文学', '杨·马特尔', '艺术史', '文学'],
        aboutBook: `<div>教育部《语文课程标准》推荐篇目，完整呈现鲁迅先生的全部小说；其中部分作品选入中小学语文课本，大多数人物在中国妇孺皆知。鲁迅的小说因感想丰富、观察深刻、意境隽永、字句凝练而备受推崇。</div>
            <div>本书还特别辑录了鲁迅先生的《我怎么做起小说来》作为序言，为读者分享自己的创作经验；书后还收录了鲁迅好友许寿裳作的《鲁迅先生年谱》，帮助读者更具体地了解鲁迅本人。因此，本书比市场上其他鲁迅作品集更完整和更有体系。</div>
            <div>鲁迅的小说是值得一读再读的经典，直到今天仍不过时；鲁迅对那个时代的青年产生过十分重要的影响...</div>`,
        aboutAuthor: `<div>美国作家、历史学家。1986年出生于美国爱达荷州的山区。17岁前从未上过学，通过自学考取杨百翰大学。2008年获文学学士学位，随后获得盖茨剑桥奖学金。2009年获剑桥大学哲学硕士学位。2010年获得奖学金赴哈佛大学访学。2014年获剑桥大学历史学博士学位。</div><div>2018年出版处女座《你当像鸟飞往你的山》，2019年因此书被《时代周刊》评为“年度影响力人物”。</div>`,
        libraries: [
          {
            zone: '义乌图书馆',
            list: [
              {
                code: '12345641',
                name: '义乌图书馆总馆',
                barCode: '12145785468512424',
                position: '位置：4楼B区6架2层',
                reference: '1247.58',
                lent: false,
              },
              {
                code: '12345642',
                name: '义乌图书馆总馆',
                barCode: '12145785468512424',
                position: '位置：4楼B区6架2层',
                reference: '1247.58',
                lent: true,
              },
            ],
          },
          {
            zone: '上溪镇分馆',
            list: [
              {
                code: '12345641',
                name: '义乌图书馆总馆',
                barCode: '12145785468512424',
                position: '位置：4楼B区6架2层',
                reference: '1247.58',
                lent: false,
              },
              {
                code: '12345642',
                name: '义乌图书馆总馆',
                barCode: '12145785468512424',
                position: '位置：4楼B区6架2层',
                reference: '1247.58',
                lent: false,
              },
            ],
          },
          {
            zone: '佛堂镇分馆',
            list: [
              {
                code: '12345641',
                name: '义乌图书馆总馆',
                barCode: '12145785468512424',
                position: '位置：4楼B区6架2层',
                reference: '1247.58',
                lent: false,
              },
              {
                code: '12345642',
                name: '义乌图书馆总馆',
                barCode: '12145785468512424',
                position: '位置：4楼B区6架2层',
                reference: '1247.58',
                lent: false,
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    // 从路由中获取参数
    const { author, id, title } = this.$route.params;
    this.book.title = title;
    this.book.author = author;
    this.book.id = id;
    // 设置假数据
    this.book.cover = 'https://alipic.lanhuapp.com/XDSlicePNGMAXb4cde546460141caf0934307191021a6486d0a629ec6ce53b3c238329ccc1696.png';
    this.book.bg = 'https://alipic.lanhuapp.com/XDSlicePNGMAX62a3a18010701b89faeacbc6e6495ee70ca504cbbd1111ba67a8cefc08343439.png';
  },
  methods: {
    // 返回
    handleGoBack() {
      this.$router.go(-1);
    },
    // 收藏
    handleCollect() {
      this.hasCollect = !this.hasCollect;
    },
    // 预借
    handleAdvance() {
      Toast.fail('暂时不可预借');
    },
    // 借阅
    handleLend() {
      Toast.success('借阅');
    },
    // 跳转评论页面
    handleShowAll() {
      Toast.success('展示');
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.book_content {
  padding-top: 88px;
}
::v-deep .detail_tabbar {
  height: 67px;
  padding: 23px 0 8px;
}
::v-deep .van-icon-arrow-left {
  font-size: 36px;
  color: #333333;
}
::v-deep .van-tab {
  flex: none;
  padding: 0 9px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  opacity: 1;
}
::v-deep .van-nav-bar {
  height: 88px;
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  opacity: 1;
  z-index: 3;
}
::v-deep .van-nav-bar__title {
  font-size: 36px;
  height: 88px;
  line-height: 88px;
}
::v-deep .van-nav-bar__content {
  height: unset;
}
::v-deep .van-tabs__nav {
}
.detail_tabbar {
  background: #ffffff;
  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 0px;
}
.detail_tabbar .van-tabbar-item__text {
  height: 33px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  opacity: 1;
}
/* 图书信息 */
.book_info_wrap {
  width: 100%;
  height: 490px;
  position: relative;
}
.book_info {
  padding: 74px 32px 0;
  width: 686px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.book_info .title {
  font-size: 36px;
  height: 36px;
  line-height: 36px;
}
.book_info .author {
  height: 28px;
  margin-top: 20px;
  font-size: 20px;
  line-height: 28px;
}
.book_info .col_cover {
  position: relative;
}
.book_info .cover {
  width: 198px;
  height: 278px;
}
.book_info .collect {
  position: absolute;
  top: -20px;
  right: -24px;
  width: 102.51px;
  height: 113.68px;
  z-index: 1;
}

.book_info .grade_row {
  margin: 24px 0;
}
.book_info .grade {
  font-size: 24px;
  line-height: 24px;
  color: #ff5252;
  margin-right: 28px;
}
.book_info .grade .van-icon {
  margin-right: 10px;
}
.book_info .appraiser {
  font-size: 24px;
  line-height: 24px;
  color: #dedede;
  opacity: 1;
}
.book_info .publisher,
.book_info .isbn {
  margin-top: 8px;
}
.book_info .shopcart {
  width: 31.15px;
  height: 27.59px;
}
.book_info .van-button__content,
.book_info .van-button__text {
  width: 100%;
}
.book_info .van-button--plain {
  width: 175px;
  height: 52px;
  margin-top: 20px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  color: #fff;
  background-color: transparent;
}
.book_info .price {
  font-size: 28px;
  color: #ff5252;
}
/* 背景图 */
.bg_wrap {
  width: 100%;
  height: 490px;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}
/* 背景图遮罩 */
.bg_wrap::before {
  width: 100%;
  height: 490px;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '';
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.bg_wrap .van-image {
  width: 100%;
  height: 490px;
  position: relative;
}
::v-deep.bg_wrap .van-image__img {
  filter: blur(12px);
}
/* tabs */
::v-deep.van-tabs .van-tabs__wrap {
  height: 76px;
}
::v-deep .van-tab__text--ellipsis {
  overflow: unset;
}
::v-deep .van-tabs__nav .van-tab {
  padding: 0 18px;
}
::v-deep .van-tabs__nav .van-tab:nth-child(1) {
  margin-left: 14px;
}
.van-tabs {
  background-color: #fff;
}
::v-deep .van-tabs__line {
  width: 20px;
  height: 4px;
  background-color: #00ccc6;
  bottom: 0.3rem;
  border-radius: 4px;
}
::v-deep .van-collapse-item .van-cell {
  margin-top: 30px;
  padding: 0 32px;
  height: 40px;
  line-height: 40px;
  align-items: center;
}
::v-deep .van-collapse-item .van-cell::after,
.van-collapse-item--border::after {
  border: none;
}
::v-deep .van-collapse-item .van-cell .van-collapse-item__title--expanded {
  padding-bottom: 2px;
}
::v-deep .van-collapse .van-cell__title span {
  height: 40px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 40px;
  color: #333333;
}

.libraris_card {
  width: 646px;
  height: 180px;
  margin: 20px auto 0;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 0 20px;
}
.icon_pos {
  width: 34px;
  height: 43px;
}
.libraris_card_info > div {
  height: 28px;
  line-height: 28px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-top: 12px;
}
.libraris_card_info > div:nth-child(1) {
  margin: 0;
}
.libraris_card_info .icon_lent {
  width: 48px;
  height: 26px;
  margin-left: 16px;
  vertical-align: sub;
}
.libraris_card_info .name {
  font-size: 24px;
}
.van-tab__pane {
  padding-bottom: 29px;
}
.tags {
  margin-top: 28px;
}
.com_pane {
  padding: 30px 32px 31px;
}
.com_pane .van-tag {
  min-width: 91px;
  height: 42px;
  text-align: center;
  padding: 0 24px;
  justify-content: center;
  margin-right: 11px;
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 21px;
  color: #666666;
  font-size: 20px;
}
.brief {
  text-indent: 2em;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 34px;
}
.com_pane .author {
  width: 378px;
  height: 40px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 40px;
  color: #333333;
  margin-top: -9px;
  margin-bottom: 30px;
}
/* 评论 */
.coments_pane {
  padding-bottom: 0;
}
.coments_pane .van-cell {
  margin-top: -10px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  align-items: center;
}
.coments_pane .van-cell::after {
  display: none;
}
.coment {
  margin-top: 24px;
  font-family: PingFang SC;
  font-weight: 400;
}
.coment .coment_content {
  width: 602px;
}
.coments_pane .profile {
  width: 68px;
  height: 68px;
}
.coment .user {
  height: 40px;
  font-size: 28px;
  line-height: 40px;
  color: #333333;
}
.coment .date {
  height: 33px;
  font-size: 24px;
  line-height: 33px;
  color: #999999;
  margin: 6px 0 10px;
}
.coment .date span {
  margin-right: 20px;
}
.coment .content {
  font-size: 24px;
  line-height: 33px;
  color: #333333;
}
.coment .icon_like,
.coment .icon_comment {
  width: 20px;
}
.coment .row_action {
  height: 28px;
  margin-top: 10px;
}
.coment .row_action .van-col {
  line-height: 28px;
}
.coment .col_like {
  min-width: 78px;
}
.coments_pane .van-button {
  width: 686px;
  height: 83px;
  margin-top: 41px;
  border: none;
  border-top: 1px solid #dedede;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.coments_pane .van-cell__title span {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.recommond {
  padding: 13px 32px;
  background-color: #fff;
  margin-top: 20px;
  margin-bottom: 100px;
}
.recommond h2 {
  height: 40px;
  line-height: 40px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  margin: 0 0 31px 0;
}
.van-swipe-item {
  height: 345px;
}
.recommond-cover {
  width: 169px !important;
}
.van-swipe-item h3 {
  width: 169px;
  height: 33px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 33px;
  color: #333333;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 13px 0 0;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
.van-swipe-item h4 {
  width: 169px;
  height: 28px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28px;
  color: #999999;
  overflow: hidden;
  margin: 4px 0 0;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
.recommond {
  position: relative;
}
.recommond::after {
  content: '';
  position: absolute;
  left: 0;
  top: 306px;
  width: 750px;
  height: 26px;
  background: #ffffff;
  box-shadow: 0px 15px 30px rgba(54, 54, 54, 0.13);
  opacity: 1;
  border-radius: 0px;
}
::v-deep .van-tabbar-item {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}
::v-deep .van-tabbar-item--active {
  color: #666666;
}
::v-deep .van-tabbar-item__icon {
  margin-bottom: 5px;
}
.tabbar_collect {
  border-left: 1px solid #d5dede;
  border-right: 1px solid #d5dede;
}
</style>
